<template>
  <div class="common-layout">
    <el-container>
      <el-aside style="width:inherit;">
        <el-menu activate-text-color="#ffd04b"  router :collapse="isCollapse" background-color="#545c64" :unique-opened="true" text-color="#fff" class="el-menu-vertical-demo" default-active="2">
            <el-sub-menu index="/desktop">
              <template #title>
                <IconCom icon="house"></IconCom>
                <span>我的主页</span>
              </template>
              
           
            <el-menu-item index="/desktop">
              <IconCom icon="wallet"></IconCom>
              <span >工作台</span>
            </el-menu-item>
       
        <el-menu-item index="/person">
          <IconCom icon="monitor"></IconCom>
          <span >个人信息</span>
        </el-menu-item>
        <!-- <el-menu-item index="/menu">
          <IconCom icon="wallet"></IconCom>
          <span >菜单管理</span>
        </el-menu-item>
        <el-menu-item index="/role">
          <IconCom icon="wallet"></IconCom>
          <span >角色列表</span>
        </el-menu-item>
        <el-menu-item index="/user">
          <IconCom icon="wallet"></IconCom>
          <span >用户列表</span>
        </el-menu-item> -->
            </el-sub-menu>
            <TreeMenu :list="treelist"></TreeMenu>
        </el-menu>
        </el-aside>
        <el-container>
          <el-header style="height:initial;">
            <HeaderCom></HeaderCom>
          </el-header>
          <el-main><router-view></router-view></el-main>
        </el-container>
    </el-container>
    </div>
</template>
<script setup lang="ts">
import { unique } from 'element-plus/es/utils/arrays.mjs';
import HeaderCom from '../../components/HeaderCom.vue';
import IconCom from '../../components/IconCom.vue';
import TreeMenu from '../../components/TreeMenu.vue';
import { computed } from 'vue';
import  useStore  from '../../store/index';

const treelist= computed(()=>useStore().UserMenus)
const isCollapse = computed(()=>useStore().isCollapse)
</script>